<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./1.CSS">
    <title>Document</title>
</head>

<body>
    <form>
        <div>
            22223333444
        </div>
        <div>
            111111111111
        </div>

        <div>
            <label for="">姓名</label>
            <input name="username" type="text" placeholder="姓名">
        </div>
        <div>
            <label for="">性别</label>
            <input name="gender" type="radio" value="男"> 男
            <input name="gender" type="radio" value="女"> 女
        </div>
        <input type="file" name="file_data">
        <button type="button">提交</button>

    </form>
    <script src="./lib/jquery.js"></script>
    <script>
        const btn = document.querySelector("button");
        btn.onclick = function (e) {
            // 构造成  a=1&b=2&c=3
            // 获取dom元素 获取里面的值
            // 自己去拼接字符串。。。。

            // jq的序列化方法 a=1&b=2&c=3
            // username=姓名&gender=性别
            // const paramsStr = $("form").serialize();
            // console.log(paramsStr);

            // 传递文件的同时 也传递普通的文本

            // const fd = new FormData(接收form的dom元素);

            // 大事件项目的时候 会再一次提到知识点！！！ 
            const form = document.querySelector("form");

            const fd = new FormData(form);

            fd.forEach((val, key) => console.log(key, val));

            $.ajax({
                // fd 包含着普通的文字数据 和 文件数据 
                data: fd
            })





        }
    </script>
</body>

</html>